<template>
  <el-form
    :model="userData"
    :rules="rules"
    ref="userDataRef"
    label-width="100px"
    label-position="top"
  >
    <el-row :gutter="10">
      <el-col :span="8">
        <el-form-item label="头像" prop="avatar">
          <CoverUpload v-model="userData.avatar"></CoverUpload>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input :maxLength="30" v-model="userData.nickName" placeholder="请输入昵称">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input :maxLength="11" v-model="userData.phone" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-button @click="showUpdatePassword">修改密码</el-button>
        </el-form-item>
        <el-form-item label="默认编辑器" prop="editorType">
          <el-radio-group v-model="userData.editorType">
            <el-radio :label="0">富文本编辑器</el-radio>
            <el-radio :label="1">MarkDown编辑器</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职业" prop="profession">
          <el-input v-model="userData.profession" placeholder="请输入职业">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveMyInfo">保存</el-button>
        </el-form-item>
      </el-col>
      <!-- 个人介绍 -->
      <el-col :span="16">
        <div class="image">
          <el-image
            style="width: 100px; height: 75px"
            src="https://cdn.pixabay.com/photo/2015/03/22/15/26/blog-684748_960_720.jpg"
            fit="fill"
          />
        </div>
        <el-form-item label="简介" prop="introduction">
          <EditorMarkdown v-model="userData.introduction"></EditorMarkdown>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <!-- 修改密码对话框 -->
  <el-dialog
    v-model="changePasswordVisible"
    title="修改密码"
    width="30%"
    @closed="closedChangePasswordVisible"
    draggable
  >
    <el-form
      :model="passwordFormData"
      :rules="rules"
      ref="passwordFormDataRef"
      label-width="80px"
      label-position="top"
    >
      <el-form-item label="新密码" prop="password">
        <el-input
          placeholder="请输入密码"
          type="password"
          show-password
          v-model="passwordFormData.password"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="重复密码" prop="rePassword">
        <el-input
          placeholder="请再次输入密码"
          type="password"
          show-password
          v-model="passwordFormData.rePassword"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changePasswordVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPassword"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  nextTick,
  onBeforeMount,
} from "vue";
import bus from "../../utils/EventBus"
const { proxy } = getCurrentInstance();

onBeforeMount(() => {
  getUserInfo();
});

// 用户信息
const userData = ref({});
// 获取用户信息
const getUserInfo = async () => {
  let result = await proxy.Request({
    url: "/getUserInfo",
  });

  if (!result) {
    proxy.$message.error("获取用户信息失败");
    return;
  }
  userData.value = result.data;
};
// 再次输入密码校验
const validateRePass = (rule, value, callback) => {
  if (value !== passwordFormData.password) {
    callback(new Error(rule.message));
  } else {
    callback();
  }
};
// 表单校验
const rules = {
  nickName: [{ required: true, message: "昵称不能为空" }],
  editorType: [{ required: true, message: "请选择默认编辑器" }],
  password: [
    { required: true, message: "请输入密码" },
    {
      validator: proxy.Verify.password,
      message: "密码最少8位，只能数字、字母和特殊字符",
    },
  ],
  rePassword: [
    { required: true, message: "请再次输入密码" },
    {
      validator: validateRePass,
      message: "两次输入的密码不一致",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号" },
    {
      validator: proxy.Verify.phone,
      trigger: "blur",
      message: "请输入正确的手机号",
    },
  ],
};
// 新密码表单
const passwordFormData = reactive({
  password: "",
  rePassword: "",
});
// 修改密码对话框显隐控制
let changePasswordVisible = ref(false);
// 显示修改密码对话框
const showUpdatePassword = () => {
  changePasswordVisible.value = true;
  nextTick(()=>{
    proxy.$refs.passwordFormDataRef.resetFields();
  })
};
// 关闭修改密码对话框
const closedChangePasswordVisible = () => {
  proxy.$refs.passwordFormDataRef.resetFields();
  changePasswordVisible.value = false;
};
// 确认修改密码
const submitPassword = () => {
  proxy.$refs.passwordFormDataRef.validate(async (valid) => {
    if (!valid) {
      proxy.$message.error("密码格式错误")
      return;
    }
    let result = await proxy.Request({
      url: "/updateMyPassword",
      params: {
        password: passwordFormData.password,
      },
    });
    if (!result) {
      proxy.$message.error("修改密码失败");
      return;
    }
    proxy.$message.success("修改密码成功");
    changePasswordVisible.value = false;
  });
};

// 保存修改用户信息
const saveMyInfo = () => {
  proxy.$refs.userDataRef.validate(async (valid) => {
    if (!valid) {
      proxy.$message.error("请完善信息");
      return;
    }
    let result = await proxy.Request({
      url: "/saveMyInfo",
      params: {
        avatar: userData.value.avatar,
        nickName: userData.value.nickName,
        phone: userData.value.phone,
        editorType: userData.value.editorType,
        profession: userData.value.profession,
        introduction: userData.value.introduction,
      },
    });
    if (!result) {
      proxy.$message.error("保存个人信息失败");
      return;
    }
    proxy.$message.success("保存个人信息成功");
    bus.emit("updateInfo")
  });
};
</script>

<style lang="scss" scoped>
.image {
  display: flex;
  justify-content: end;

  .el-image {
    border-radius: 15%;
    overflow: hidden;
  }
}
</style>